'use client'
import Image from 'next/image'
import { ReactLenis, useLenis } from 'lenis/react'
import { useEffect, useState } from 'react'
import { twMerge } from 'tailwind-merge'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import { useGSAP } from '@gsap/react'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import CountUp from 'react-countup'
import { Journey, Student } from './_components'

gsap.registerPlugin(ScrollTrigger)

export default function Home() {
  const [position, setPosition] = useState(0)
  const [currentTab, setCurrentTab] = useState(0)
  const [indicatorLeft, setIndicatorLeft] = useState(0)
  const [indicatorWidth, setIndicatorWidth] = useState(80)
  
  const lenis = useLenis(({ scroll }) => {
    const sections = document.querySelectorAll('.section')
    
    sections.forEach((section, index) => {
      const rect = section.getBoundingClientRect()
      // @ts-ignore
      if (rect.top <= ((section?.offsetHeight || 0) / 2) && rect.bottom > 0) {
        const index = parseInt(section.getAttribute('data-index') || '0')
        setCurrentTab(index)
      }
    })
  })

  const handleTabClick = (index: number, e: any) => {
    setCurrentTab(index)
    // 根据data-index属性获取元素
    const section = document.querySelector(`[data-index='${index}']`) as HTMLElement | null
    if (section) {
      lenis?.scrollTo(section, { offset: -70 })
    }
  }

  useGSAP(() => {
    if (window.innerWidth < 768) return
    gsap.from(".my-video", {
      scale: 1.3,               // 初始缩放比例
      y: 100,                  // 初始垂直位置
      duration: 1.5,            // 动画持续时间
      borderRadius: 0,         // 圆角半径
      ease: "power2.out",       // 动画效果
      scrollTrigger: {
        trigger: ".my-video",    // 触发动画的元素
        start: "top 80%",        // 动画开始位置：当元素到达视口 80% 位置时开始
        end: "top 30%",          // 动画结束位置：当元素到达视口 30% 位置时结束
        scrub: true,             // 启用平滑滚动（scroll-linked animation）
      }
    });
  })

  useEffect(() => {
    const tabs = document.querySelectorAll('.tab')
    // @ts-ignore
    const left = tabs[currentTab].offsetLeft
    // @ts-ignore
    const width = tabs[currentTab].offsetWidth
    setIndicatorLeft(left)
    setIndicatorWidth(width)
  }, [currentTab])

  return (
    <ReactLenis root >
      <main>
        <section className='bg-[url(/images/home/banner.jpg)] bg-no-repeat bg-cover h-auto md:h-[400px] lg:h-[600px] xl:h-[800px] text-white'>
          <div className='w-[1650px] max-1650:w-auto px-[10px] lg:px-[20px] 2xl:px-0 mx-auto flex flex-col justify-center items-center h-full py-[70px] md:py-0'>
            <h1 className='text-[30px] md:text-[50px] lg:text-[70px] leading-[30px] md:leading-[50px] lg:leading-[70px] font-bold text-center mb-[15px] md:mb-[20px] lg:mb-[30px]'>教育大学多元升学教育平台</h1>
            <p className='text-base md:text-[22px] lg:text-[30px] md:leading-[22px] lg:leading-[30px] font-light text-center'>愿今朝踌躇满志,盼明日硕果累累</p>
          </div>
        </section>
        <section className='shadow-lg bg-white sticky top-0 z-20'>
          <div className='w-[1650px] max-1650:w-auto px-[10px] md:px-[20px] 2xl:px-0 mx-auto relative'>
            <ul className='flex items-center text-xs md:text-base lg:text-[18px] text-[#333] space-x-[6px] md:space-x-[40px]'>
              <li className={twMerge('tab cursor-pointer select-none py-[15px] md:py-[18px] transition-all', currentTab === 0 && 'text-[#0C4E99]')} onClick={(e: any) => handleTabClick(0, e)}>公司简介</li>
              <li className={twMerge('tab cursor-pointer select-none py-[15px] md:py-[18px] transition-all', currentTab === 1 && 'text-[#0C4E99]')} onClick={(e: any) => handleTabClick(1, e)}>企业愿景</li>
              <li className={twMerge('tab cursor-pointer select-none py-[15px] md:py-[18px] transition-all', currentTab === 2 && 'text-[#0C4E99]')} onClick={(e: any) => handleTabClick(2, e)}>发展历程</li>
              <li className={twMerge('tab cursor-pointer select-none py-[15px] md:py-[18px] transition-all', currentTab === 3 && 'text-[#0C4E99]')} onClick={(e: any) => handleTabClick(3, e)}>IP团队</li>
              <li className={twMerge('tab cursor-pointer select-none py-[15px] md:py-[18px] transition-all', currentTab === 4 && 'text-[#0C4E99]')} onClick={(e: any) => handleTabClick(4, e)}>团队风采</li>
              <li className={twMerge('tab cursor-pointer select-none py-[15px] md:py-[18px] transition-all', currentTab === 5 && 'text-[#0C4E99]')} onClick={(e: any) => handleTabClick(5, e)}>媒体报道</li>
              <li className={twMerge('tab cursor-pointer select-none py-[15px] md:py-[18px] transition-all', currentTab === 6 && 'text-[#0C4E99]')} onClick={(e: any) => handleTabClick(6, e)}>公司地址</li>
            </ul>
            <div className='absolute top-0 left-0 right-0 h-[3px] bg-[#0C4E99] ease-out transition-all duration-500' style={{ left: indicatorLeft, width: indicatorWidth }}></div>
          </div>
        </section>
        <section data-index='0' className='section bg-[#F3F5F8] pt-[30px] md:pt-[60px] lg:pt-[115px] pb-[30px] md:pb-[68px] 2xl:bg-[url(/images/home/desc_bg.png)] bg-[length:50%] md:bg-auto bg-no-repeat bg-right-bottom'>
          <div className='w-[1650px] max-1650:w-auto px-[10px] md:px-[20px] 2xl:px-0 mx-auto'>
            <h2 className='flex items-center pb-[10px] md:pb-[20px] lg:pb-[32px] md:mb-0 lg:mb-[14px]'>
              <span className='size-[10px] md:size-[14px] rounded-full border md:border-2 border-[#0C4E99]'></span>
              <p className='text-[18px] md:text-[20px] lg:text-[24px] leading-[18px] md:leading-[20px] lg:leading-[24px] ml-[5px] md:ml-[10px] text-[#333]'>公司简介</p>
            </h2>
            <div>
              <div className='border-b block lg:flex items-start w-auto xl:w-[1200px] pb-[20px] md:pb-[50px] lg:pb-[70px] pt-[10px] md:pt-[30px] lg:pt-[50px]'>
                <div className='max-w-max lg:max-w-[396px] lg:mr-[100px]'>
                  <p className='text-[#0C4E99] font-bold text-base md:text-[26px] lg:text-[36px] md:leading-[26px] lg:leading-[36px] mb-[10px] md:mb-[18px] lg:mb-[24px]'>天骥教育集团</p>
                  <p className='text-[#060606] text-sm md:text-base lg:text-[18px] lg:leading-[24px] mb-[10px] lg:mb-0'>上海天骥云教育科技有限公司由清华、北大、复旦交大等名校校友创立的大学多元升学教育平台</p>
                </div>
                <p className='text-[#666] flex-1 lg:leading-[30px] text-xs md:text-sm lg:text-base'>从最初教育的种子，到经过多年发展，天骥教育已成为中国大学生在线教育的佼佼者旗下拥有全学科保研品牌一保研人，全学科考研品牌一考研人，科研垂类品牌一科研人，立足商科、辐射全学科的留学品牌--云际留学，在大学生升学教育行业独占鳌头，市场占有率稳居第一。</p>
              </div>
              <div className='block lg:flex items-start w-auto xl:w-[1200px] pb-[20px] md:pb-[50px] lg:pb-[70px] pt-[10px] md:pt-[50px]'>
                <div className='max-w-max lg:max-w-[396px] md:mr-[100px]'>
                  <p className='text-[#0C4E99] font-bold text-base md:text-[26px] lg:text-[36px] md:leading-[26px] lg:leading-[36px] mb-[10px] md:mb-[24px]'>保研人</p>
                  <p className='text-[#060606] text-sm md:text-base lg:text-[18px] lg:leading-[24px] mb-[10px] lg:mb-0'>天骥教育旗下的大学多元升学品牌11年坚守大学规划</p>
                </div>
                <p className='text-[#666] flex-1 lg:leading-[30px] text-xs md:text-sm lg:text-base'>2013年成立干清华园，是保研行业中成立最早的保研咨询机构之一，经过11年的发展拥有了覆盖全学科的独特保研服务方案，成为业内各学科保研辅导的领军者。成立至今，已累计辅导学员2.5万人,本科生源上至清北复交、下至四非双非，录取学员中，985/211高校上岸率超95% 。</p>
              </div>
              <ul className='flex items-center justify-between w-auto xl:w-[1200px] text-left md:text-center lg:text-left gap-0 md:gap-[30px] lg:gap-[100px]'>
                <li className='w-fit md:w-[300px]'>
                  <p className='text-[#333] font-bold mb-[5px] text-[20px] md:text-[35px] lg:text-[48px] leading-[20px] md:leading-[40px]'><CountUp enableScrollSpy scrollSpyOnce scrollSpyDelay={300} start={0} end={5000000} duration={3} />+</p>
                  <p className='text-[#666] text-sm lg:text-base'>家庭的幕后升学指导团队</p>
                </li>
                <li className='w-fit md:w-[300px]'>
                  <p className='text-[#0C4E99] font-bold mb-[5px] text-[20px] md:text-[35px] lg:text-[48px] leading-[20px] md:leading-[40px]'><CountUp enableScrollSpy scrollSpyOnce scrollSpyDelay={300} start={0} end={20000} duration={3} />+</p>
                  <p className='text-[#0C4E99] text-sm lg:text-base'>专业名师咨询师</p>
                </li>
                <li className='w-fit md:w-[300px]'>
                  <p className='text-[#333] font-bold mb-[5px] text-[20px] md:text-[35px] lg:text-[48px] leading-[20px] md:leading-[40px]'><CountUp enableScrollSpy scrollSpyOnce scrollSpyDelay={300} start={0} end={10000} duration={3} />+</p>
                  <p className='text-[#666] text-sm lg:text-base'>顶级竞赛/论文导师</p>
                </li>
              </ul>
            </div>
          </div>
        </section>
        <section data-index='1' className='section bg-[url(/images/home/yuanjing_bg.jpg)] bg-no-repeat bg-cover bg-center h-auto xl:h-[837px] mx-auto pb-[110px] md:pb-[200px] lg:pb-[220px] xl:pb-0'>
          <div className='w-[1650px] max-1650:w-auto px-[10px] md:px-[20px] 2xl:px-0 h-full mx-auto pt-[60px] relative before:absolute before:inset-0 before:w-[300px] md:before:w-[653px] before:h-[100px] md:before:h-[195px] before:bg-[url(/images/home/vision.png)] before:bg-no-repeat before:bg-contain before:bg-center before:m-auto'>
            <h2 className='flex items-center pb-[10px] md:pb-[32px] md:mb-[14px]'>
              <span className='size-[10px] md:size-[14px] rounded-full border md:border-2 border-white'></span>
              <p className='text-[18px] md:text-[24px] leading-[18px] md:leading-[24px] ml-[5px] md:ml-[10px] text-white'>企业愿景</p>
            </h2>
            <p className='mt-[20px] md:mt-[90px] text-[18px] md:text-[26px] lg:text-[34px] leading-[18px] md:leading-[26px] lg:leading-[34px] text-white text-center mb-[20px] md:mb-[30px] lg:mb-[48px]'>打造世界领先的大学多元教育平台</p>
            <p className='text-[30px] md:text-[60px] lg:text-[72px] leading-[30px] md:leading-[60px] lg:leading-[67px] text-white text-center font-bold mb-[30px] md:mb-[52px]'>助力千万大学家庭圆梦名校</p>
            <ul className='text-white flex items-center justify-center gap-[20px] md:gap-[60px] lg:gap-[100px] text-sm md:text-[18px] lg:text-[24px] md:leading-[20px] lg:leading-[24px] text-center md:text-left'>
              <li className='flex items-center'>
                <div className='hidden md:block h-[15px] bg-white/50 w-[25px] rounded-full mr-[10px]'>
                  <span className='size-[15px] bg-white block rounded-full'></span>
                </div>
                <p className='flex-1'>深度服务客户，为客户创造价值</p>
              </li>
              <li className='flex items-center'>
                <div className='hidden md:block h-[15px] bg-white/50 w-[25px] rounded-full mr-[10px]'>
                  <span className='size-[15px] bg-white block rounded-full'></span>
                </div>
                <p className='flex-1'>积极回馈社会，推动社会进步</p>
              </li>
              <li className='flex items-center'>
                <div className='hidden md:block h-[15px] bg-white/50 w-[25px] rounded-full mr-[10px]'>
                  <span className='size-[15px] bg-white block rounded-full'></span>
                </div>
                <p className='flex-1'>助力员工成长，持续赋能人才</p>
              </li>
            </ul>
            <ul className='flex items-center justify-between gap-[10px] md:gap-0 mt-[20px] md:mt-[35px] lg:mt-[52px]'>
              <li className='w-[120px] h-[142px] text-base md:text-[24px] text-[#0052AE] leading-[20px] md:leading-[28px] font-bold bg-[url(/images/home/tuoyuan_bg.png)] bg-no-repeat bg-center bg-contain flex items-center justify-center flex-col'>
                <p className='translate-y-[-10px]'>客户</p>
                <p className='translate-y-[-10px]'>第一</p>
              </li>
              <li className='w-[120px] h-[142px]  text-base md:text-[24px] text-[#0052AE] leading-[20px] md:leading-[28px] font-bold bg-[url(/images/home/tuoyuan_bg.png)] bg-no-repeat bg-center bg-contain flex items-center justify-center flex-col'>
                <p className='translate-y-[-10px]'>团队</p>
                <p className='translate-y-[-10px]'>写作</p>
              </li>
              <li className='w-[120px] h-[142px]  text-base md:text-[24px] text-[#0052AE] leading-[20px] md:leading-[28px] font-bold bg-[url(/images/home/tuoyuan_bg.png)] bg-no-repeat bg-center bg-contain flex items-center justify-center flex-col'>
                <p className='translate-y-[-10px]'>持续</p>
                <p className='translate-y-[-10px]'>创新</p>
              </li>
              <li className='w-[120px] h-[142px]  text-base md:text-[24px] text-[#0052AE] leading-[20px] md:leading-[28px] font-bold bg-[url(/images/home/tuoyuan_bg.png)] bg-no-repeat bg-center bg-contain flex items-center justify-center flex-col'>
                <p className='translate-y-[-10px]'>分享</p>
                <p className='translate-y-[-10px]'>共赢</p>
              </li>
              <li className='w-[120px] h-[142px]  text-base md:text-[24px] text-[#0052AE] leading-[20px] md:leading-[28px] font-bold bg-[url(/images/home/tuoyuan_bg.png)] bg-no-repeat bg-center bg-contain flex items-center justify-center flex-col'>
                <p className='translate-y-[-10px]'>追求</p>
                <p className='translate-y-[-10px]'>卓越</p>
              </li>
            </ul>
          </div>
        </section>
        <Journey />
        <section data-index='3' className='section bg-[url(/images/home/ip-teacher-bg.jpg)] bg-no-repeat bg-cover bg-center pt-[20px] md:pt-[50px] lg:pt-[76px] pb-[20px] md:pb-[48px]'>
          <div className='w-[1650px] max-1650:w-auto px-[10px] md:px-[20px] 2xl:px-0 mx-auto'>
            <h2 className='flex items-center pb-0 md:pb-[32px] mb-[20px] md:mb-[405x] lg:mb-[64px]'>
              <span className='size-[10px] md:size-[14px] rounded-full border md:border-2 border-white'></span>
              <p className='text-[18px] md:text-[24px] leading-[18px] md:leading-[24px] ml-[5px] md:ml-[10px] text-white'>IP老师</p>
            </h2>
            <div className='w-[1147px] max-1650:w-auto mx-auto mb-[40px] md:mb-0 lg:mb-[100px]'>
              <ul className='flex items-end flex-wrap justify-evenly gap-[10px] md:gap-[20px] xl:gap-[60px]'>
                <li className='md:w-[181px] md:h-[385px] md:bg-[url(/images/home/teacher-bg.png)] bg-no-repeat bg-contain'>
                  <div className='relative w-[115px] md:w-[156px] h-[145px] md:h-[210px] mx-auto'>
                    <Image alt='' fill src='/images/home/teacher-avatar0.png' className='block w-[156px] select-none mx-auto md:translate-y-[-20px] mb-[20px] md:mb-0' />
                  </div>
                  <p className='text-white text-base md:text-[20px] md:leading-[20px] text-center mb-[10px] md:mb-[24px]'>宋静静老师</p>
                  <p className='text-xs text-center text-white md:leading-[20px] mb-[5px] md:mb-0'>大学生涯规划顶级IP</p>
                  <p className='text-xs text-center text-white md:leading-[20px] mb-[5px] md:mb-0'>大学生涯规划名师</p>
                  <p className='text-xs text-center text-white md:leading-[20px] mb-[5px] md:mb-0'>高考志愿规划领域专家</p>
                  <p className='text-xs text-center text-white md:leading-[20px]'>毕业于山东大学，高校特聘导师</p>
                </li>
                <li className='md:w-[181px] md:h-[385px] md:bg-[url(/images/home/teacher-bg.png)] bg-no-repeat bg-contain'>
                  <div className='relative w-[115px] md:w-[156px] h-[145px] md:h-[210px] mx-auto'>
                    <Image alt='' fill src='/images/home/teacher-avatar1.png' className='block w-[156px] select-none mx-auto md:translate-y-[-20px] mb-[20px] md:mb-0' />
                  </div>
                  <p className='text-white text-base md:text-[20px] md:leading-[20px] text-center mb-[10px] md:mb-[24px]'>钠珀老师</p>
                  <p className='text-xs text-center text-white md:leading-[20px] mb-[5px] md:mb-0'>大学保研规划顶级IP</p>
                  <p className='text-xs text-center text-white md:leading-[20px] mb-[5px] md:mb-0'>保研领域规划名师</p>
                  <p className='text-xs text-center text-white md:leading-[20px] mb-[5px] md:mb-0'>全网粉丝200W+</p>
                  <p className='text-xs text-center text-white md:leading-[20px]'>毕业于清华大学</p>
                </li>
                <li className='md:w-[181px] md:h-[385px] md:bg-[url(/images/home/teacher-bg.png)] bg-no-repeat bg-contain xl:translate-y-[-55px]'>
                  <div className='relative w-[115px] md:w-[156px] h-[145px] md:h-[210px] mx-auto'>
                    <Image alt='' fill src='/images/home/teacher-avatar2.png' className='block w-[156px] select-none mx-auto md:translate-y-[-20px] mb-[20px] md:mb-0' />
                  </div>
                  <p className='text-white text-base md:text-[20px] md:leading-[20px] text-center mb-[10px] md:mb-[24px]'>大新老师</p>
                  <p className='text-xs text-center text-white md:leading-[20px] mb-[5px] md:mb-0'>大学保研规划顶级IP</p>
                  <p className='text-xs text-center text-white md:leading-[20px] mb-[5px] md:mb-0'>保研领域规划名师</p>
                  <p className='text-xs text-center text-white md:leading-[20px] mb-[5px] md:mb-0'>全网粉丝200W+</p>
                  <p className='text-xs text-center text-white md:leading-[20px]'>毕业于清华大学</p>
                </li>
                <li className='md:w-[181px] md:h-[385px] md:bg-[url(/images/home/teacher-bg.png)] bg-no-repeat bg-contain'>
                  <div className='relative w-[115px] md:w-[156px] h-[145px] md:h-[210px] mx-auto'>
                    <Image alt='' fill src='/images/home/teacher-avatar3.png' className='block w-[156px] select-none mx-auto md:translate-y-[-20px] mb-[20px] md:mb-0' />
                  </div>
                  <p className='text-white text-base md:text-[20px] md:leading-[20px] text-center mb-[10px] md:mb-[24px]'>大王博士</p>
                  <p className='text-xs text-center text-white md:leading-[20px] mb-[5px] md:mb-0'>大学升学规划顶级IP</p>
                  <p className='text-xs text-center text-white md:leading-[20px] mb-[5px] md:mb-0'>大学升学及科研领域规划名师</p>
                  <p className='text-xs text-center text-white md:leading-[20px] mb-[5px] md:mb-0'>全网粉丝100w+</p>
                  <p className='text-xs text-center text-white md:leading-[20px]'>毕业中科院，获得理科博士学位</p>
                </li>
                <li className='md:w-[181px] md:h-[385px] md:bg-[url(/images/home/teacher-bg.png)] bg-no-repeat bg-contain'>
                  <div className='relative w-[115px] md:w-[156px] h-[145px] md:h-[210px] mx-auto'>
                    <Image alt='' fill src='/images/home/teacher-avatar4.png' className='block w-[156px] select-none mx-auto md:translate-y-[-20px] mb-[20px] md:mb-0' />
                  </div>
                  <p className='text-white text-base md:text-[20px] md:leading-[20px] text-center mb-[10px] md:mb-[24px]'>升哥</p>
                  <p className='text-xs text-center text-white md:leading-[20px] mb-[5px] md:mb-0'>大学升学规划顶级IP</p>
                  <p className='text-xs text-center text-white md:leading-[20px] mb-[5px] md:mb-0'>大学升学规划资深名师</p>
                  <p className='text-xs text-center text-white md:leading-[20px] mb-[5px] md:mb-0'>保研规划领域专家</p>
                  <p className='text-xs text-center text-white md:leading-[20px]'>首批保研元老</p>
                </li>
              </ul>
            </div>
            <div className='flex items-center justify-evenly md:justify-center gap-[10px] lg:gap-[44px]'>
              <div className='flex flex-col items-start lg:items-center w-fit lg:w-[500px]'>
                <div className='flex items-center justify-end lg:space-x-[13px] text-white mb-[5px] md:mb-[13px]'>
                  <i className='hidden xl:block w-[46px] h-[42px] bg-[url(/images/home/star.png)] bg-no-repeat bg-contain'></i>
                  <p className='text-[30px] md:text-[40px] lg:text-[50px] xl:text-[62px] leading-[30px] md:leading-[40px] lg:leading-[60px] font-sans font-bold w-fit lg:w-[350px] text-center'><CountUp enableScrollSpy scrollSpyOnce scrollSpyDelay={300} start={0} end={2000000} duration={3} />+</p>
                  <i className='hidden xl:block w-[46px] h-[42px] bg-[url(/images/home/star.png)] bg-no-repeat bg-contain'></i>
                </div>
                <p className='text-left md:text-center text-white text-base md:text-[18px] lg:text-[20px] font-bold'>全平台粉丝</p>
              </div>
              <div className='hidden size-[162px] rounded-full bg-[rgba(255,255,255,0.1)] shadow-[0px_26px_139px_0px_rgba(40,73,129,0.19)] md:flex items-center justify-center'>
                <div className='bg-[#0052AE] shadow-[0px_26px_139px_0px_rgba(40,73,129,0.19)] size-[100px] rounded-full flex items-center flex-col justify-center'>
                  <i className='size-[50px] bg-[url(/images/home/s234.png)] bg-no-repeat'></i>
                  <p className='text-white'>战绩数据</p>
                </div>
              </div>
              <div className='flex flex-col items-start w-fit lg:w-[500px]'>
                <div className='text-left lg:text-center'>
                  <div className='flex items-center lg:space-x-[13px] text-white mb-[5px] md:mb-[13px]'>
                    <i className='hidden xl:block w-[46px] h-[42px] bg-[url(/images/home/star.png)] bg-no-repeat bg-contain'></i>
                    <p className='text-[30px] md:text-[40px] lg:text-[50px] xl:text-[62px] leading-[30px] md:leading-[40px] lg:leading-[60px] font-sans font-bold w-fit lg:w-[300px] text-center'><CountUp enableScrollSpy scrollSpyOnce scrollSpyDelay={300} start={0} end={35000} duration={3} />+</p>
                    <i className='hidden xl:block w-[46px] h-[42px] bg-[url(/images/home/star.png)] bg-no-repeat bg-contain'></i>
                  </div>
                  <p className='text-white text-base md:text-[18px] lg:text-[20px] font-bold'>全流程辅导学员</p>
                </div>
              </div>
            </div>
          </div>
        </section>
        <Student />
        <section data-index='4' className='section bg-[#F3F5F8] pt-[30px] lg:pt-[36px] relative before:absolute before:bottom-0 before:left-0 before:right-0 before:h-[260px] before:bg-white'>
          <div className='w-[1650px] max-1650:w-auto px-[10px] md:px-[20px] 2xl:px-0 mx-auto'>
            <h2 className='flex items-center pb-[20px] md:pb-[32px] mb-[20px] md:mb-[35px] lg:mb-[64px]'>
              <span className='size-[10px] md:size-[14px] rounded-full border md:border-2 border-[#0C4E99]'></span>
              <p className='text-[18px] md:text-[24px] leading-[18px] md:leading-[24px] ml-[5px] md:ml-[10px] text-[#333]'>团队风采</p>
            </h2>
            <div className='relative mb-[10px] md:mb-[47px]'>
              <div className='absolute right-0 top-[-40px] md:top-[-50px] lg:top-[-60px] h-auto md:h-[50px] lg:h-[60px] flex items-end space-x-[5px] md:space-x-[14px]'>
                <div className='bg-[#0D4F9A] h-full rounded-t-[5px] md:rounded-t-[12px] lg:rounded-t-[20px] text-base md:text-[18px] lg:text-[20px] leading-[40px] md:leading-[50px] lg:leading-[60px] px-[20px] md:px-[40px] lg:px-[50px] text-white cursor-pointer select-none'>公司团体照</div>
                <div className='bg-[#367AC7] h-full rounded-t-[5px] md:rounded-t-[12px] lg:rounded-t-[20px] text-base md:text-[18px] lg:text-[20px] leading-[40px] md:leading-[50px] lg:leading-[60px] px-[20px] md:px-[40px] lg:px-[50px] text-white cursor-pointer select-none'>公司宣传视频</div>
              </div>
              <div className='bg-white rounded-[5px] md:rounded-[10px] lg:rounded-[20px] px-[10px] md:px-[20px] lg:px-[42px] py-[10px] md:py-[20px] lg:py-[52px]'>
                <div className='overflow-x-auto'>
                  <ul className='space-x-[10px] w-fit flex items-center justify-between'>
                    <li className='w-[350px] md:w-[492px] h-[250px] md:h-[354px] relative'>
                      <Image alt='' fill src='/images/home/WechatIMG44.jpg' />
                    </li>
                    <li className='w-[350px] md:w-[492px] h-[250px] md:h-[354px] relative'>
                      <Image alt='' fill src='/images/home/WechatIMG45.jpg' />
                    </li>
                    <li className='w-[350px] md:w-[492px] h-[250px] md:h-[354px] relative'>
                      <Image alt='' fill src='/images/home/WechatIMG46.jpg' />
                    </li>
                    <li className='w-[350px] md:w-[492px] h-[250px] md:h-[354px] relative'>
                      <Image alt='' fill src='/images/home/ke1.jpg' />
                    </li>
                    <li className='w-[350px] md:w-[492px] h-[250px] md:h-[354px] relative'>
                      <Image alt='' fill src='/images/home/ke2.jpg' />
                    </li>
                    <li className='w-[350px] md:w-[492px] h-[250px] md:h-[354px] relative'>
                      <Image alt='' fill src='/images/home/ke3.jpg' />
                    </li>
                    <li className='w-[350px] md:w-[492px] h-[250px] md:h-[354px] relative'>
                      <Image alt='' fill src='/images/home/ke4.jpg' />
                    </li>
                    <li className='w-[350px] md:w-[492px] h-[250px] md:h-[354px] relative'>
                      <Image alt='' fill src='/images/home/ke5.jpg' />
                    </li>
                    <li className='w-[350px] md:w-[492px] h-[250px] md:h-[354px] relative'>
                      <Image alt='' fill src='/images/home/ke6.jpg' />
                    </li>
                    <li className='w-[350px] md:w-[492px] h-[250px] md:h-[354px] relative'>
                      <Image alt='' fill src='/images/home/ke7.jpg' />
                    </li>
                    <li className='w-[350px] md:w-[492px] h-[250px] md:h-[354px] relative'>
                      <Image alt='' fill src='/images/home/ke8.jpg' />
                    </li>
                    <li className='w-[350px] md:w-[492px] h-[250px] md:h-[354px] relative'>
                      <Image alt='' fill src='/images/home/ke9.jpg' />
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div className='relative z-10'>
              <video src="/images/home/baoyan.mp4" controls className='my-video block rounded-[5px] md:rounded-[10px] lg:rounded-[20px] overflow-hidden w-full aspect-[1650/940] max-h-[940px] object-cover'></video>
              <div className='flex items-center justify-center gap-[14px] md:gap-[35px] mt-[20px] md:mt-[40px]'>
                <i className='size-[30px] md:size-[53px] bg-[url(/images/home/left-arrow.png)] bg-no-repeat bg-contain cursor-pointer'></i>
                <p className='text-center text-[#666] font-bold text-base md:text-[18px] md:leading-[18px]'><span className='text-[#0052AE] text-base md:text-[18px] md:leading-[18px]'>01</span>/03</p>
                <i className='size-[30px] md:size-[53px] bg-[url(/images/home/right-arrow.png)] bg-no-repeat bg-contain cursor-pointer'></i>
              </div>
            </div>
          </div>
        </section>
        <section data-index='5' className='section pt-[20px] md:pt-[48px] pb-[30px] lg:pb-[75px]'>
          <div className='w-[1650px] max-1650:w-auto px-[10px] md:px-[20px] 2xl:px-0 mx-auto'>
            <h2 className='flex items-center gap-[10px] mb-[10px] md:mb-[30px] lg:mb-[47px]'>
              <span className='size-[10px] md:size-[14px] rounded-full border md:border-2 border-[#0C4E99]'></span>
              <span className='text-[18px] md:text-[24px] leading-[18px] md:leading-[24px] ml-[5px] md:ml-[10px]'>媒体报道</span>
            </h2>
            <ul className='grid grid-cols-1 lg:grid-cols-3 gap-[10px] xl:gap-[20px] mb-[10px] xl:mb-[20px]'>
              <li className='border md:border-2 rounded-[5px] md:rounded-[10px] lg:rounded-[20px] h-auto 2xl:h-[350px] px-[10px] md:px-[25px] xl:px-[36px] py-[10px] md:py-[25px] lg:py-[38px]'>
                <div className='relative w-[243px] h-[46px] mb-[10px] md:mb-[20px] lg:mb-[46px]'>
                  <Image alt='' fill src='/images/home/media-1.png' />
                </div>
                <p className='text-[#215DA2] font-bold leading-[24px] mb-[5px] md:mb-[15px] lg:mb-[36px]'>中国在线教育报道</p>
                <p className='text-sm md:text-base xl:text-[18px] 2xl:text-[20px] 2xl:leading-[33px] text-[#333] line-clamp-4'>2024年7月21日，由天骥教育集团旗下保研人品牌举办的你好，大学生--准大一生涯启动会”直播活动在保研人视频号盛大后幕!</p>
              </li>
              <li className='border md:border-2 rounded-[5px] md:rounded-[10px] lg:rounded-[20px] h-auto 2xl:h-[350px] px-[10px] md:px-[25px] lg:px-[36px] py-[10px] md:py-[25px] xl:py-[38px]'>
                <div className='relative w-[60px] h-[60px] mb-[10px] md:mb-[20px] lg:mb-[46px]'>
                  <Image alt='' fill src='/images/home/media-2.png' />
                </div>
                <p className='text-[#215DA2] font-bold leading-[24px] mb-[5px] md:mb-[15px] lg:mb-[36px]'>网易新闻报道</p>
                <p className='text-sm md:text-base xl:text-[18px] 2xl:text-[20px] 2xl:leading-[33px] text-[#333] line-clamp-4'>2023“回响中国”腾讯新闻，经过腾讯新闻权威专家组提名，组委会多轮评审评议，综合办学年限、行业知名度、教学满意度等多维度评价指标，保研人最终荣膺“2023年度影响力教育品牌”称号!</p>
              </li>
              <li className='border md:border-2 rounded-[5px] md:rounded-[10px] lg:rounded-[20px] h-auto 2xl:h-[350px] px-[10px] md:px-[25px] xl:px-[36px] py-[10px] md:py-[25px] xl:py-[38px]'>
                <div className='relative w-[130px] h-[46px] mb-[10px] md:mb-[20px] lg:mb-[46px]'>
                  <Image alt='' fill src='/images/home/media-3.png' />
                </div>
                <p className='text-[#215DA2] font-bold leading-[24px] mb-[5px] md:mb-[15px] lg:mb-[36px]'>央广网报道</p>
                <p className='text-sm md:text-base xl:text-[18px] 2xl:text-[20px] 2xl:leading-[33px] text-[#333] line-clamp-4'>2023年，保研人荣获央广网「声彻中国」教育年度大会:“保研教育榜样品牌十年保研咨询，专注国内大学生的升学规划和背景提升</p>
              </li>
            </ul>
            <ul className='grid grid-cols-1 lg:grid-cols-2 gap-[10px] xl:gap-[20px]'>
              <li className='border md:border-2 rounded-[5px] md:rounded-[10px] lg:rounded-[20px] h-auto 2xl:h-[350px] px-[10px] md:px-[25px] xl:px-[36px] py-[10px] md:py-[25px] xl:py-[38px]'>
                <div className='relative w-[138px] h-[46px] mb-[10px] md:mb-[20px] lg:mb-[46px]'>
                  <Image alt='' fill src='/images/home/media-4.png' />
                </div>
                <p className='text-[#215DA2] font-bold leading-[24px] mb-[5px] md:mb-[15px] lg:mb-[36px]'>回响中国报道</p>
                <p className='text-sm md:text-base xl:text-[18px] 2xl:text-[20px] 2xl:leading-[33px] text-[#333] line-clamp-4'>2023年11月30日，2023“回响中国”腾讯新闻·教育频道年度论坛在北京圆满落幕。保研人代表大新老师和迪哥受邀出席，经过腾讯新闻权威专家组提名，组委会多轮评审评议，综合办学年限、行业知名度、教学满意度等多维度评价指标，保研人最终荣膺“2023年度影响力教育品牌”称号!</p>
              </li>
              <li className='border md:border-2 rounded-[5px] md:rounded-[10px] lg:rounded-[20px] h-auto 2xl:h-[350px] px-[10px] md:px-[25px] xl:px-[36px] py-[10px] md:py-[25px] xl:py-[38px]'>
                <div className='relative w-[190px] h-[46px] mb-[10px] md:mb-[20px] lg:mb-[46px]'>
                  <Image alt='' fill src='/images/home/media-5.png' />
                </div>
                <p className='text-[#215DA2] font-bold leading-[24px] mb-[5px] md:mb-[15px] lg:mb-[36px]'>中南大学教育基金会报道</p>
                <p className='text-sm md:text-base xl:text-[18px] 2xl:text-[20px] 2xl:leading-[33px] text-[#333] line-clamp-4'>7月16日，上海云骥教育科技有限公司向中南大学教育基金会捐赠30万人民币，设立“云骥奖学金”。根据协议内容，上海云骥教育科技有限公司捐赠的30万元资金将用于设立“云骥奖学金”，旨在激励优秀且条件困难的在校学生发奋学习，以此促进双方合作更上新台阶。</p>
              </li>
            </ul>
          </div>
        </section>
        <section data-index='6' className='section bg-[#F3F5F8] pt-[30px] md:pt-[65px]'>
          <div className='w-[1650px] max-1650:w-auto px-[10px] md:px-[20px] 2xl:px-0 mx-auto bg-[url(/images/home/dian_bg.png)] bg-no-repeat bg-[0_450px] pb-[30px] xl:pb-[132px]'>
            <h2 className='flex items-center pb-0 md:pb-[32px] mb-[20px] md:mb-0 xl:mb-[64px]'>
              <span className='size-[10px] md:size-[14px] rounded-full border md:border-2 border-[#0C4E99]'></span>
              <p className='text-[18px] md:text-[24px] leading-[18px] md:leading-[24px] ml-[5px] md:ml-[10px] text-[#333]'>公司地址</p>
            </h2>
            <div className='block xl:flex justify-between'>
              <div className='hidden xl:block aspect-[752/556] select-none max-h-[556px] md:w-[600px] lg:w-[752px] mx-auto relative mb-[30px] lg:mb-0'>
                <Image alt='' fill src='/images/home/map_pic.png' draggable={false} />
                <div className='size-[104px] absolute right-[15%] bottom-[28%]'>
                  <i className={twMerge('hidden absolute inset-0 m-auto size-[104px] rounded-full bg-[rgba(12,78,153,0.08)]', position === 0 && 'block')}></i>
                  <i className={twMerge('hidden absolute inset-0 m-auto size-[52px] rounded-full bg-[rgba(12,78,153,0.29)]', position === 0 && 'block')}></i>
                  <i className={twMerge('block absolute inset-0 m-auto w-[18px] h-[24px] translate-y-[-18px] bg-[url(/images/home/location.png)] bg-no-repeat bg-contain bg-center', position === 0 && 'w-[30px] h-[40px]')}></i>
                </div>
                <div className='size-[104px] absolute right-[24%] bottom-[51%]'>
                  <i className={twMerge('hidden absolute inset-0 m-auto size-[104px] rounded-full bg-[rgba(12,78,153,0.08)]', position === 1 && 'block')}></i>
                  <i className={twMerge('hidden absolute inset-0 m-auto size-[52px] rounded-full bg-[rgba(12,78,153,0.29)]', position === 1 && 'block')}></i>
                  <i className={twMerge('block absolute inset-0 m-auto w-[18px] h-[24px] translate-y-[-18px] bg-[url(/images/home/location.png)] bg-no-repeat bg-contain bg-center', position === 1 && 'w-[30px] h-[40px]')}></i>
                </div>
                <div className='size-[104px] absolute right-[27%] bottom-[25%]'>
                  <i className={twMerge('hidden absolute inset-0 m-auto size-[104px] rounded-full bg-[rgba(12,78,153,0.08)]', position === 2 && 'block')}></i>
                  <i className={twMerge('hidden absolute inset-0 m-auto size-[52px] rounded-full bg-[rgba(12,78,153,0.29)]', position === 2 && 'block')}></i>
                  <i className={twMerge('block absolute inset-0 m-auto w-[18px] h-[24px] translate-y-[-18px] bg-[url(/images/home/location.png)] bg-no-repeat bg-contain bg-center', position === 2 && 'w-[30px] h-[40px]')}></i>
                </div>
              </div>
              <ul className='flex flex-col items-end gap-y-[10px] md:gap-y-[20px] xl:gap-y-[40px]'>
                <li className={twMerge('flex items-center bg-white rounded-[5px] md:rounded-[10px] px-[10px] md:px-[20px] xl:px-[30px] py-[10px] md:py-[20px] 2xl:py-[43px] cursor-pointer select-none text-[#333] w-full xl:w-[550px] text-sm md:text-[22px] max-h-[152px]', position === 0 && 'text-white 2xl:w-[600px] bg-[#195BA6] text-sm md:text-[22px] 2xl:text-[26px] md:leading-[22px] 2xl:leading-[40px]')} onClick={() => setPosition(0)}>
                  <i className={twMerge('w-[15px] md:w-[30px] h-[20px] md:h-[40px] bg-[url(/images/home/location.png)] bg-contain bg-no-repeat block mr-[10px] md:mr-[22px] transition-colors', position === 0 && 'bg-[url(/images/home/location1.png)]')}></i>
                  <div className='flex-1'>
                    <p className={twMerge('font-bold text-[#0C4E99] md:mb-[10px]', position === 0 && 'text-white mb-0')}>上海(总部)：</p>
                    <p className='line-clamp-1'>杨浦区政立路497号国正中心</p>
                  </div>
                </li>
                <li className={twMerge('flex items-center bg-white rounded-[5px] md:rounded-[10px] px-[10px] md:px-[20px] xl:px-[30px] py-[10px] md:py-[20px] 2xl:py-[43px] cursor-pointer select-none text-[#333] w-full xl:w-[550px] text-sm md:text-[22px] max-h-[152px]', position === 1 && 'text-white 2xl:w-[600px] bg-[#195BA6] text-sm md:text-[22px] 2xl:text-[26px] md:leading-[22px] 2xl:leading-[40px]')} onClick={() => setPosition(1)}>
                <i className={twMerge('w-[15px] md:w-[30px] h-[20px] md:h-[40px] bg-[url(/images/home/location.png)] bg-contain bg-no-repeat block mr-[10px] md:mr-[22px] transition-colors', position === 1 && 'bg-[url(/images/home/location1.png)]')}></i>
                  <div className='flex-1'>
                    <p className={twMerge('font-bold text-[#0C4E99] md:mb-[10px]', position === 1 && 'text-white mb-0')}>北京：</p>
                    <p className='line-clamp-1'>海淀区中关村南大街2号院1号楼数码大厦A座</p>
                  </div>
                </li>
                <li className={twMerge('flex items-center bg-white rounded-[5px] md:rounded-[10px] px-[10px] md:px-[20px] xl:px-[30px] py-[10px] md:py-[20px] 2xl:py-[43px] cursor-pointer select-none text-[#333] w-full xl:w-[550px] text-sm md:text-[22px] max-h-[152px]', position === 2 && 'text-white 2xl:w-[600px] bg-[#195BA6] text-sm md:text-[22px] 2xl:text-[26px] md:leading-[22px] 2xl:leading-[40px]')} onClick={() => setPosition(2)}>
                <i className={twMerge('w-[15px] md:w-[30px] h-[20px] md:h-[40px] bg-[url(/images/home/location.png)] bg-contain bg-no-repeat block mr-[10px] md:mr-[22px] transition-colors', position === 2 && 'bg-[url(/images/home/location1.png)]')}></i>
                  <div className='flex-1'>
                    <p className={twMerge('font-bold text-[#0C4E99] md:mb-[10px]', position === 2 && 'text-white mb-0')}>武汉：</p>
                    <p className='line-clamp-1'>洪山区高新大道221号泷悦国际大厦1701</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </section>
      </main>
    </ReactLenis>
  )
}
